import React ,{useState,useRef}from "react";
import { PageContainer } from "@ant-design/pro-layout";
import ProTable from "@ant-design/pro-table";
import { Button,message,Modal,Image } from "antd";
import CreateBizType from "./component/CreateBizType";
import UpdateBizType from "./component/UpdateBizType";
import { queryProductCategory,addProductCategory,updateProductCategory,removeProductCategory } from "@/services/ant-design-pro/apis";

const BizType = (props) => {
     
    const actionRef = useRef();
    const [selRows,setSelRows]=useState();
    const [createModalVisible,handleModalVisible]=useState(false);
    const [updateModalVisible,handleUpdteModalVisible]=useState(false);
    const [stepFormVals,setStepFormVals]= useState();
    const [parentId,setParentId]= useState(0);

    const IMGRender = (record) => {
        var item = (
          <Image
            key={record.id}
            width={60}
            preview={{
              imageRender: () => <video muted width="100%" controls src={record.img} />,
              toolbarRender: () => null,
            }}
            src={record.img}
          />
        );
        return item;
      };

    const handleDel = async (record) => {
        Modal.confirm({
            title: '删除产品分类',
            content: '确认删除产品分类？',
            okText: '确认',
            cancelText: '取消',
            onOk: async () => {
                const hide = message.loading('正在删除');
               try{
                await removeProductCategory({ id: record.id })
                hide();
                message.success('删除成功');
                actionRef.current.reload();
               }catch(error){
                hide();
                message.error('删除失败请重试！');
                return false;
               }
            }
        })
    }

    const handleAdd = async (value) =>{
        const hide = message.loading("正在添加");
        try{
            await addProductCategory({...value,parentId})
            hide();
            handleModalVisible(false);
            message.success("添加成功");
            actionRef.current.reload();
            return true;
        }catch(error){
            hide();
            message.error("添加失败")
            return false;
        }
    }

    const handleUpdate = async (value) =>{
        const hide = message.loading("正在配置");
        try{
            await updateProductCategory({...value})
            hide();
            handleUpdteModalVisible(false);
            setStepFormVals(undefined);
            message.success("配置成功");
            actionRef.current.reload();
        }catch(error){
            hide();
            message.error("配置失败")
        }
    }

    function CZRender(record) {
        var item = [
          <a
            key="edit"
            onClick={() => {
              setStepFormVals(record);
              handleUpdteModalVisible(true);
            }}
          >
            配置
          </a>,
          <a
            key="delete"
            onClick={() => {
              handleDel(record);
            }}
          >
            删除
          </a>,
        ];
        if(record.parentId==0){
           item=[
            <a key="edit" onClick={()=>{
                setStepFormVals(record);
                handleUpdteModalVisible(true);
            }}>配置</a>,
            <a key="add" onClick={()=>{
                setParentId(record.id)
                handleModalVisible(true)
            }}>新增</a>,
            <a key="delete" onClick={()=>{
                handleDel(record);
            }}>删除</a>]
        }
        return item;
      }

    const columns=[
        {
            title:'名称',
            dataIndex:'name',
            hideInSearch: true
        },
        {
            title:'排序值',
            dataIndex:'sort',
            hideInSearch: true
        },
        {
            title: '图片',
            dataIndex: 'img',
            hideInSearch: true,
            render: (demo, record) => [IMGRender(record)],
          },
          {
              title:'操作',
              dataIndex:'option',
              valueType:'option',
              render: (_, record) => [CZRender(record)],
          }
  
    ]

    return (
        <PageContainer>
            <ProTable
               columns={columns}
               actionRef={actionRef}
               headerTitle='产品分类列表'
               rowKey='id'
               search={false}
               request={queryProductCategory}
               rowSelection={{
                   onChange:(_,selRows)=>{
                       setSelRows(selRows)
                   }
               }}
               toolBarRender={()=>[
                   <Button type="primary" onClick={()=>{
                       setParentId(0)
                       handleModalVisible(true)
                   }}>新建</Button>
               ]}
            >              
            </ProTable>

            <CreateBizType
              createModalVisible={createModalVisible}
              handleModalVisible={() => {
                handleModalVisible(false);
              }}
              handCreate={() => {}}
              onSubmit={async (values) => {
                await handleAdd(values);
              }}
              onCancel={() => {
                handleModalVisible(false);
              }}
      
            >
            
            </CreateBizType>

            {stepFormVals && Object.keys(stepFormVals).length?(
                <UpdateBizType
                  updateModalVisible={updateModalVisible}
                  onCanel={()=>{
                      handleUpdteModalVisible(false)
                      setStepFormVals(undefined);
                  }}
                  onSubmit={(values)=>{
                    handleUpdate(values)
                  }}
                  values={stepFormVals}
                >

                </UpdateBizType>
            ):null}
        </PageContainer>
    )
}

export default  BizType;

